<template>
  <div class="setup-gender">
    <span class="up-title">我的性别</span>
    <div class="up-cont">
      <label class="up-label">
        <input v-model="gender" value="0" type="radio" class="up-input">
        男
      </label>
      <label class="up-label">
        <input v-model="gender" value="1" type="radio" class="up-input">
        女
      </label>
      <div class="up-btn" @click="updateUserInfo()">修改</div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      gender:null
    }
  },
  created(){
    this.gender = this.$route.query.gender;
  },
  methods:{
    updateUserInfo(){
      if(this.util.isBlank(this.gender)){
        this.$message('请选择性别');
        return;
      }
      this.$http.postForm('/user/updateUserInfo', {userSex:this.gender}, res=>{
        this.util.goback();
      });
    }
  }
}
</script>

<style lang='scss' scoped>
.setup-gender {
  margin-top: 10px;
  padding: 30px;
  .up-title {
    color: #aaaaaa;
    vertical-align: top;
    display: inline-block;
    width: 100px;
    text-align: center;
  }
  .up-cont {
    display: inline-block;
    width: calc(100% - 100px);
    .up-label {
      margin-right: 15px;
      // .up-input {

      // }
    }
    .up-btn {
      margin-top: 30px;
      cursor: pointer;
      text-align: center;
      width: 100px;
      line-height: 40px;
      background-color: $base-color;
      color: #ffffff;
      border-radius: 20px;
      font-size: 15px;
    }
  }
}
</style>